<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程案例</title>
</head>
<body>
    <!-- (一) -->
    <!-- 克隆元素 -->
    <ul class="box">
        <li class="list">
            <span>我是li中span的元素</span>
            <button id="btn">点击复制li元素</button>
        </li>
    </ul>
    <script>
        // cloneNode() 方法 拷贝所有属性和值。
        // 点击btn元素的时候复制li元素
        var btn=document.querySelector('#btn');var
        var box=docunment.querySelector('.box');
        var list=document.querySelector('.list');
        var list=document.querySelector('i');
        // 判断box这个节点是否有子节点，返回布尔值
        btn.onclick=function(){
            // 复制克隆li元素 list.cloneNode(布尔值)克隆list这个元素
            // 当参数为true的时候表示深克隆，把list的所有内容都克隆下来
            // 当参数为flase的时候表示浅克隆，只会克隆list这个元素，不会克隆下面的子元素
         var res=list.cloneNode(true);
        //  把克隆的元素添加到ul
        box.appendChild(res);
        }
    </script>
    <!-- (二) -->
    <!-- 盒子居中 -->
    <style>
        .box{
            width: 400px;
            height: 100px;
            border: 1px solid red;
            background: pink;
            padding:10px;
            position:absolute;        }
    </style>
    <div class="box"></div>
    <script>
        var box=document.querySelector('.box');
        // 浏览器的宽度-盒子的宽度除以2设置为盒子的left
        center(box);
        // 当窗口发生变化时也要实现居中效果
        window.onresize=function(){
            center(box)
        }
        // 实现一个居中效果的函数
        function center(ele){
            var winHeight=window.innerHeight;
            var winwidth=window.innerWidth;
            // 获取浏览器的宽高
            var eleWidth=ele.offsetWidth;
            var eleHeight=window.innerWidth;
            // 获取元素的宽高
            var eleWidth=ele.offsetWidth;
            var eleHeight=ele.offsetHeight;
            ele.style.left=(winWidth-eleWidth)/2+'px';
            ele.style.top=(winHeight-eleHeight)/2+'px';

        }
    </script>
    
</body>
</html>